<template>
    <div  class="container">
    <!-- <h1>用户详细信息</h1> -->
    <el-row style="padding: 20px 20px;" :gutter="50">
      <el-col :xs="12" :sm="12" :md="12" :lg="16" :xl="12" >
        <el-space  direction="vertical" alignment="start" :size="40">
        <el-card  class="box-card" >
        <template #header>
            <div class="card-header">
            <el-text>基本信息</el-text>
            <el-button-group style="float: right;">
                <el-button   class="button" text @click="cancel" v-if="!isDisable">取消</el-button>
                <el-button class="button" text @click="edit" v-if="isDisable">编辑</el-button>
                <el-button class="button" text @click="savaCustom" v-else>完成</el-button>
            </el-button-group>
            </div>
        </template>
        <el-form :inline="true"
            label-width="75px"
            label-position="right"
            :model="formInline" class="demo-form-inline"
            style="padding-left: 50px;" :disabled="isDisable">
            <el-form-item label="客户姓名">
            <el-input v-model="formInline.name"  />
            </el-form-item>
            <el-form-item label="原本专业">
            <el-input v-model="formInline.professional"  />
            </el-form-item>
            <el-form-item label="客户性别">
            <el-input v-model="formInline.gender"   />
            </el-form-item>
            <el-form-item label="意向专业">
            <el-input v-model="formInline.major"   />
            </el-form-item>
            <el-form-item label="客户电话">
            <el-input v-model="formInline.phone"  />
            </el-form-item>
            <el-form-item label="渠道类型">
            <el-input v-model="formInline.customSource"   />
            </el-form-item>
            <el-form-item label="客户邮箱">
            <el-input v-model="formInline.email"/>
            </el-form-item>
            <el-form-item label="客户来源">
            <el-input v-model="formInline.customSource" />
            </el-form-item>
            <el-form-item label="客户类型">
            <el-input v-model="formInline.customType" />
            </el-form-item>
            <el-form-item label="客户归属">
            <el-input v-model="formInline.customAff" />
            </el-form-item>
            <el-form-item label="面试时间">
            <el-input v-model="formInline.interviewTime"  />
            </el-form-item>
            <el-form-item label="是否分班">
            <el-input v-model="formInline.isBanding" clearable />
            </el-form-item>
            <el-form-item label="专业评价">
            <el-input v-model="formInline.evaluate" type="textarea"  style="width: 545px;"/>
            </el-form-item>
            
         </el-form>
        </el-card>
        <el-card  class="box-card" >
        <template #header>
            <div class="card-header">
            <el-text>贷项信息</el-text>
            </div>
        </template>
        <el-form :inline="true" 
            label-width="75px"
            label-position="right"
            :model="formInline" 
            class="demo-form-inline" 
            style="padding-left: 50px;">
            <el-form-item label="付款金额:">
             <el-text>0.0元</el-text>
            </el-form-item>
            <el-form-item label="贷款金额:">
                <el-text>0.0元</el-text>
            </el-form-item>
            <el-form-item label="总金额:">
                <el-text>0.0元</el-text>
            </el-form-item>
            <el-form-item label="还款方式:">
                <el-text>0.0元</el-text>
            </el-form-item>
            <el-form-item label="是否贷款:">
                <el-text>未贷款</el-text>
            </el-form-item>
            <el-form-item label="每月还款:">
                <el-text>0.0元</el-text>
            </el-form-item>
         </el-form>
        </el-card>
       
    </el-space>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="8">
  <el-space  direction="vertical" size="30">
    <div class="card-header" style="border-top: 1px solid #c2c3c2;
    background-color:#fff;width: 425px;height: 45px; text-align: left;padding: 14px 15px 7px;
    color: #337ab7;">
        <span>跟进记录</span>
    </div>  
    <el-timeline>
        <el-timeline-item
        v-for="(activity, index) in activities"
        :key="index"
        :icon="activity.icon"
        :type="activity.type"
        :color="activity.color"
        :size="activity.size"
        :hollow="activity.hollow"
        :timestamp="activity.timestamp"
        placement="top"
        >
        <el-card style="width: 200px;height: 86px;">
            <h4>{{ activity.content }}</h4>
            <p>潜在客户</p>
        </el-card>
      
        </el-timeline-item>
    </el-timeline> 
  </el-space>
  </el-col>

</el-row>
</div>
</template>

<script setup>
import {ref,reactive,toRefs} from 'vue'
import { Document } from '@element-plus/icons-vue';
const  props = defineProps({
    customData:Object
})
const {customData} = toRefs(props)
console.log(customData.value,'《《《子')

//表单中的数据
const formInline = reactive({
    id: customData.value.id,
    uid: customData.value.uid,
    name: customData.value.name,
    gender: customData.value.gender,
    phone: customData.value.gender,
    email: customData.value.email,
    customType: customData.value.customType,
    customAff: customData.value.customAff,
    professional: customData.value.professional,
    customSource: customData.value.customType,
    interviewTime: customData.value.interviewTime,
	sourceType:'',
    isBanding:'',
    evaluate:''
})
const isDisable = ref(false)
 
//取消按钮
const cancel = ()=>{
    isDisable.value= true
}
//点击编辑
const edit = ()=>{
    isDisable.value= false
}
//完成按钮 保存修改的客户数据
const  savaCustom=()=>{
 //保存修改编辑之后的客户信息
}

const activities = [
  {
    content: '客户类型',
    timestamp: '2018-04-12 20:46',
    size: 'large',
    type: 'primary',
    icon: Document,
  },
  {
    content: '客户类型',
    timestamp: '2018-04-12 20:46',
    size: 'large',
    type: 'primary',
    icon: Document,
  },
  {
    content: '客户类型',
    timestamp: '2018-04-12 20:46',
    size: 'large',
    type: 'primary',
    icon: Document,
  },
  {
    content: '客户类型',
    timestamp: '2018-04-12 20:46',
    size: 'large',
    type: 'primary',
    icon: Document,
  },
  
]

</script >
<style lang="less" scoped>
 .button{
    color:#337ab7;
 }
 .demo-form-inline{
    font-size: 13px;
    font-weight:bold;
    color:#676a6c ;
    .el-text{
        width: 220px;
    }
 }
 .demo-form-inline .el-input{
    --el-input-width: 220px;

 }
 .card-header{
    font-weight: bold;
 }


</style>